<html lang="en"><head>
    <meta charset="UTF-8">


    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>No SVG, no image, CSS-only fluid slider with input[type=range]</title>

    <link rel="stylesheet" href="./style.css">

</head>

<body translate="no" style="--list: none;">
<main>
    <ul class='slider'>
        <li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
            <div class='content'>
                <h2 class='title'>"Lossless Youths"</h2>
                <p class='description'> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
                    praesentium nisi. Id laboriosam ipsam enim.  </p>
                <button>Read More</button>
            </div>
        </li>
        <li class='item' style="background-image: url('https://i.redd.it/tc0aqpv92pn21.jpg')">
            <div class='content'>
                <h2 class='title'>"Estrange Bond"</h2>
                <p class='description'> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
                    praesentium nisi. Id laboriosam ipsam enim.  </p>
                <button>Read More</button>
            </div>
        </li>
        <li class='item' style="background-image: url('https://wharferj.files.wordpress.com/2015/11/bio_north.jpg')">
            <div class='content'>
                <h2 class='title'>"The Gate Keeper"</h2>
                <p class='description'> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
                    praesentium nisi. Id laboriosam ipsam enim.  </p>
                <button>Read More</button>
            </div>
        </li>
        <li class='item' style="background-image: url('https://images7.alphacoders.com/878/878663.jpg')">
            <div class='content'>
                <h2 class='title'>"Last Trace Of Us"</h2>
                <p class='description'>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
                </p>
                <button>Read More</button>
            </div>
        </li>
        <li class='item' style="background-image: url('https://theawesomer.com/photos/2017/07/simon_stalenhag_the_electric_state_6.jpg')">
            <div class='content'>
                <h2 class='title'>"Urban Decay"</h2>
                <p class='description'>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
                </p>
                <button>Read More</button>
            </div>
        </li>
        <li class='item' style="background-image: url('https://da.se/app/uploads/2015/09/simon-december1994.jpg')">
            <div class='content'>
                <h2 class='title'>"The Migration"</h2>
                <p class='description'> Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
                    praesentium nisi. Id laboriosam ipsam enim.  </p>
                <button>Read More</button>
            </div>
        </li>
    </ul>
    <nav class='nav'>
        <ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
        <ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
    </nav>
</main>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
<script src="script.js" type="module"></script>
</html>